<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>影视剧留言板</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="comments">

    <!-- 评论内容 -->
    <h3 class="comm-head">评论</h3>
    <div class="comm-input">
      <textarea placeholder="爱发评论的人，运气都很棒">
      </textarea>
      <div class="foot">
        <div class="word">0/100</div>
        <div class="btn">发表评论</div>
      </div>
    </div>
    <!-- 头部 -->
    <h3 class="comm-head">
      热门评论<sub>(5)</sub>
      <span class="active">默认</span>
      <span>时间</span>
    </h3>
    <!-- 评论列表 -->
    <ul class="comm-list">
      <li class="comm-item">
        <div class="avatar" style="background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');"></div>
        <div class="info">
          <p class="name vip">
            清风徐来
            <img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
          </p>
          <p class="time">
            <span>2012-12-12</span>
            <span class="iconfont icon-collect"></span>
            <span class="iconfont icon-collect-sel"></span>
            <span class="del">删除</span>
          </p>
          <p>
            这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
          </p>
        </div>
      </li>

    </ul>
  </div>
  <script src="../工具.js"></script>
  <script src="../jquery.js"></script>
  <script>
    getXuan()
    function getXuan() {
      $.ajax({
        method: 'get',
        url: 'http://124.223.14.236:3001/api/notes',
        success(res) {
          let { data: { list } } = res
          console.log(list);
          let n = list.map(item => {
            return `
          <li class="comm-item">
        <div class="avatar" style="background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');"></div>
        <div class="info">
          <p class="name vip">
            ${item.username}
            <img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
          </p>
          <p class="time">
            <span>${formTime(+item.time)}</span>
            <span class="iconfont icon-collect"></span>
            <span class="iconfont icon-collect-sel"></span>
            <span class="del" data-id="${item.id}">删除</span>
          </p>
          <p class="neirong" data-id="${item.id}">
           ${item.content}
          </p>
        </div>
      </li>
          `
          }).join('')
          $('.comm-list').html(n)
        }
      })
    }
    // 点击发布
    $('.btn').on('click', function () {
      let n = $('.comm-input textarea').val().trim()
      let m = localStorage.getItem('token')
      console.log(m);
      console.log(n);
      $.ajax({
        method: 'post',
        url: 'http://124.223.14.236:3001/api/notes',
        headers: {
          Authorization: m
        },
        data: {
          content: n
        },
        success(res) {
          console.log(res);
          getXuan()
        }
      })
    })
    // 修改
    $('body').on('click', '.neirong', function () {
      let k = prompt('请输入修改的内容')
      let n = $(this).attr('data-id')
      $.ajax({
        "url": `http://124.223.14.236:3001/api/notes/${n}`,
        "method": "PUT",
        headers: {
          Authorization: localStorage.getItem('token')
        },
        data: {
          content: k
        },
        success(res) {
          getXuan()
        }
      })
    })
    // 删除
    $('body').on('click', '.del',function(){
      let n = $(this).attr('data-id')
      $.ajax({
        "url": `http://124.223.14.236:3001/api/notes/${n}`,
        "method": "DELETE",
        headers: {
          Authorization: localStorage.getItem('token')
        },
        success(res) {
          getXuan()
        }
      })
    })
  </script>
</body>

</html>